<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>COUNT MONEY</title>
<link rel="stylesheet" href="../../css/bootstrap/bootstrap.css"
	th:href="@{/css/bootstrap/bootstrap.css}" />
<script src="../../js/jquery-1.11.2.js" th:src="@{/js/jquery-1.11.2.js}"></script>
<script src="../../js/client.js" th:src="@{/js/client.js}"></script>
<style>
@font-face {
	font-family: 'Glyphicons Halflings';
	src: url('../fonts/glyphicons-halflings-regular.eot');
	src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')
		format('embedded-opentype'),
		url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
		url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
		url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular')
		format('svg');
}
}
</style>
</head>
<body>
	<header></header>
	<nav class="navbar navbar-default col-md-offset-1 col-md-10 container" style="background-color: red;">
		<div class="container-fluid">
			<ul class="nav navbar-nav">
				<li><a href="#">1. Chọn khu vực</a></li>
				<li><a href="#">2. Chọn nhà hàng</a></li>
				<li><a href="#">3. Chọn thức ăn</a></li>
				<li><a href="#" style="color: yellow;">4. Xác nhận đơn hàng</a></li>
			</ul>
		</div>
	</nav>
	<section class="col-md-offset-1 col-md-10">
		<article>
			<div id="error"></div>
			<div class="row">
				<div class="col-md-9">
					<div class="panel panel-default">
						<div class="panel-heading" style="background-color: red; color: yellow;"><strong>TÍNH TIỀN</strong></div>
						<div class="panel-body">
							<form method="post" th:action="@{/client/toorder}" id="toorder"
								name="toorder" class="form-horizontal" onsubmit="return validateForm();">
								<input type="hidden" id="restaurantId" name="restaurantId" th:value="${restaurant.restaurantId}"/>
								<input type="hidden" id="count" name="count" th:value="${count}"/>
								<input type="hidden" id="deliveryPrice" name="deliveryPrice" th:value="${restaurant.deliveryPrice}"/>
								<div class="form-group">
									<label class="control-label col-md-3" for="personalOrCompany">Personal
										Or Company:</label>
									<div class="col-md-3 radio-inline">
										<label><input type="radio"
											name="personalOrCompany" checked="checked" />Personal</label>
									</div>
									<div class="col-md-offset-1 col-md-3 radio-inline">
										<label><input type="radio" name="personalOrCompany" />Company</label>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3" for="username">Full
										name:</label>
									<div class="col-md-9">
										<input type="text" id="username" name="username"
											class="form-control" placeholder="Enter username" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3" for="cityName">City
										name:</label>
									<div class="col-md-9">
										<input type="text" id="cityName" name="cityName"
											class="form-control" th:value="${restaurant.cityName}"
											readonly="readonly" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-offset-1 col-md-3" for="districtName">District
										name:</label>
									<div class="col-md-9">
										<input type="text" id="districtName" name="districtName"
											class="form-control" th:value="${restaurant.districtName}"
											readonly="readonly" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">Ward name:</label>
									<div class="col-md-9">
										<input type="text" id="wardName" name="wardName"
											class="form-control" placeholder="Enter ward name" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3" for="email">Email:</label>
									<div class="col-md-9">
										<input type="email" id="email" name="email"
											class="form-control" placeholder="Enter email" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3" for="phoneNumber">Phone
										number:</label>
									<div class="col-md-9">
										<input type="number" id="phoneNumber" name="phoneNumber"
											class="form-control" placeholder="Enter phone number" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3" for="reside">Reside:</label>
									<div class="col-md-3">
										<select class="form-control" id="reside" name="reside">
											<option value="1">Nhà</option>
											<option value="2">Căn hộ</option>
											<option value="3">Khách sạn</option>
											<option value="4">Văn phòng</option>
											<option value="5">Khu đinh thự</option>
										</select>
									</div>
									<label class="control-label col-md-3" for="paymentMethod">Hình
										thức thanh toán:</label>
									<div class="col-md-3 radio-inline">
										<input type="radio" id="paymentMethod" name="paymentMethod"
											value="1" checked="checked" />Tiền mặt
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">Giao hàng lúc:</label>
									<div class="col-md-4">
										<select class="form-control" id="deliveryTime"
											name="deliveryTime">
											<option value="1">Càng nhanh càng tốt</option>
											<option value="2">18:30</option>
											<option value="3">19:30</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">Ghi chú:</label>
									<div class="col-md-9">
										<textarea cols="30" rows="4" class="form-control" id="note"
											name="note"></textarea>
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-3 pull-right">
										<button type="submit"
											class="btn btn-primary glyphicon glyphicon-new-window pull-right">HOÀN
											TẤT</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="panel panel-default"
						style="border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;">
						<div class="panel-heading"
							style="background-color: #DC143C; border-top-left-radius: 15px; border-top-right-radius: 15px;">
							<div class="panel-title"
								style="font-size: 30px; line-height: 32px; color: #FFF;">Giỏ
								hàng</div>
						</div>
						<div class="panel-body">
							<div id="order_yes">
								<div class="row">
									<div class="col-md-12">
										<table class="table table-hover">
											<tbody id="order">
												<tr th:each="fo : ${lf}">
													<td th:text="${fo.amount}"></td>
													<td th:text="${fo.foodName}"></td>
													<td th:text="${fo.price} + 'đ'"></td>
												</tr>
												<tr th:each="dr : ${ld}">
													<td th:text="${dr.amount}"></td>
													<td th:text="${dr.drinkName}"></td>
													<td th:text="${dr.price} + 'đ'"></td>
												</tr>
												<tr>
													<td></td>
													<td>Phí giao hàng:</td>
													<td th:text="${restaurant.deliveryPrice} + 'đ'"></td>
													<td></td>
												</tr>
												<tr>
													<td></td>
													<td><strong>Tổng cộng:</strong></td>
													<td th:text="${count} + 'đ'" style="color: red;"></td>
													<td></td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</article>
	</section>
	<footer class="container col-sm-12" style="margin-top: 50px;">
		<ol class="breadcrumb text-center">
			<li class="active"><p>@2015 orderonline.com - ĐẶT THỨC ĂN TRỰC TUYẾN, một phần của <strong>Takeaway.com</strong></p></li>
		</ol>
	</footer>
</body>
</html>